<template>
	<el-form ref="formObj" :model="wyform" :rules="rules" label-width="100px">
		<el-form-item label="姓名" prop="name">
			<el-input v-model="wyform.name" placeholder="请输入用户姓名"></el-input>
		</el-form-item>
		<el-form-item label="手机号" prop="phone">
			<el-input v-model="wyform.phone" placeholder="请输入手机号"></el-input>
		</el-form-item>
		<el-form-item label="电子信箱" prop="email">
			<el-input v-model="wyform.email" placeholder="请输入电子信箱"></el-input>
		</el-form-item>
		<el-form-item label="性别" prop="sex">
			<el-radio-group v-model="wyform.sex">
				<el-radio :value="1">男</el-radio>
				<el-radio :value="0">女</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="头像" prop="file">
			<el-upload
				action="#"
				:auto-upload="false"
				list-type="picture-card"
				:limit="1"
				:on-change="changeFile"
				:on-remove="removeFile">
				<el-icon><Picture /></el-icon>
			</el-upload>
		</el-form-item>
		<el-form-item label="登录密码" prop="password">
			<el-input v-model="wyform.password" placeholder="请输入登录密码" show-password></el-input>
		</el-form-item>
		<el-form-item label="确认密码" prop="repassword">
			<el-input v-model="wyform.repassword" placeholder="请确认登录密码" show-password></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" plain @click="save">保存</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { Picture } from '@element-plus/icons-vue'
import { get, post } from '@/axios'
const emits = defineEmits(['update:show'])
const formObj = ref()
const wyform = reactive({
	name: '',
	phone: '',
	email: '',
	sex: null,
	file: null,
	password: '',
	repassword: ''
})
const checkpwd = (field, value, callback) => {
	if (wyform.password === value) {
		callback()
	} else {
		callback(new Error())
	}
}
function check (field, value, callback) {
	get('/umsUser/check', { field, value }, content => {
		if (content) {
			callback()
		} else {
			callback(new Error())
		}
	})
}
const rules = {
	name: [
		{ required: true, message: '请输入姓名', trigger: 'blur' },
		{ max: 20, message: '长度最多20个字符', trigger: 'blur' }
	],
	phone: [
		{ required: true, message: '请输入手机号', trigger: 'blur' },
		{ pattern: /^1[3-9][0-9]{9}$/, message: '手机号格式不正确', trigger: 'blur' },
		{ validator: (field, value, callback) => { check('phone', value, callback) }, message: '该手机号已经被使用', trigger: 'blur' }
	],
	email: [
		{ required: true, message: '请输入邮箱', trigger: 'blur' },
		{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
		{ validator: (field, value, callback) => { check('email', value, callback) }, message: '该电子信箱已经被使用', trigger: 'blur' }
	],
	sex: [
		{ required: true, message: '请选择性别', trigger: 'change' }
	],
	file: [
		{ required: true, message: '请上传头像', trigger: 'change' }
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
		{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
	],
	repassword: [
		{ required: true, message: '请再次输入密码', trigger: 'blur' },
		{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' },
		{ validator: checkpwd, message: '两次密码不一致', trigger: 'blur' }
	]
}
function changeFile (uploadFile) {
	wyform.file = uploadFile.raw
}
function removeFile () {
	wyform.file = null
}
function save () {
	post('/umsUser/add', wyform, content => {
		emits('update:show', false)
	}, formObj)
}
</script>

<style scoped lang="scss">
</style>